<template>
    <el-dialog :visible.sync="isShow" :title="headerTitle" @close="handleClose" center top="14vh" width="460px" append-to-body :fullscreen="fullscreen">
        <el-form :model="dialogForm" size="small" :disabled="type==3" label-suffix=":" ref="detailForm" :rules="rules" label-width="200px">
            <!--              物料类型：-->

            <el-form-item ref="groupingCode" :label="$t('basicData.materialSubType')" prop="materialType">
                <el-autocomplete style="width:100%" popper-class="my-autocomplete" v-model="dialogForm.groupingCode" :fetch-suggestions="materialRemoteMethod" placeholder="请输入内容" @blur="handleMaterialBlur" @select="handleMaterialSelect">
                    <i class="el-icon-search el-input__icon" slot="suffix">
                    </i>
                    <template slot-scope="{ item }">
                        {{ item.groupingCode }}
                    </template>
                </el-autocomplete>
            </el-form-item>

            <!--              检验标准时长：-->
            <el-form-item :label="$t('basicData.StandardInspectionDuration')" prop="inspectionDuration">
                <el-input placeholder="请输入内容" type="number" min="0" v-model="dialogForm.inspectionDuration">
                    <template slot="append">小时</template>
                </el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm" :loading="loading" icon="el-icon-document" size="small">{{$t('public.save')}}</el-button>
        </div>
    </el-dialog>
</template>

<script>
import {updateBatchMaterial} from '@/api/basic/materialMessage'
import {listAllMaterialTypeV2} from '@/api/basic/materialtype'

export default {
    name: 'batch',
    // components:{},
    dicts: [
        'NYIQC_STANDARD', //标准品 【是，否】
        'NYIQC_STATUS', //状态 【0 再用 1停用 2报废】
        'NYIQC_MSA_STATUS', //MSA状态 【0完成  1未开始  2进行中】
    ],
    props: {
        value: {
            type: Object,
        },
        visible: {
            type: Boolean,
            default: false,
        },
        type: [String, Number], //1:新增  2：编辑 3：查看
    },
    watch: {
        value(val) {},
    },
    computed: {
        isShow: {
            get() {
                return this.visible
            },
            set() {},
        },
        headerTitle() {
            const { type } = this
            let title = ''
            if (type == 2) {
                title = this.$t('basicData.batchEditMaterialInfo')
            }
            return title
        },
    },
    data() {
        return {
            loading: false,
            fullscreen: false,
            deviceOptions: undefined,
            materialOptions: undefined,
            dialogForm: {},
            // 表单校验
            rules: {
                materialType: [
                    {
                        required: true,
                        message: '物料类型不能为空',
                        trigger: 'blur',
                    },
                ],
                inspectionDuration: [
                    {
                        required: true,
                        message: '检验时长不能为空',
                        trigger: 'blur',
                    },
                ],
            },
        }
    },
    methods: {
        /** 发起提交 */
        submitForm: function () {
            this.$refs.detailForm.validate((valid) => {
                if (valid) {
                    this.loading = true
                    updateBatchMaterial(this.dialogForm).then((res) => {
                        this.loading = false
                        if (res.code == 200) {
                            this.$emit('refresh')
                            this.$modal.msgSuccess('操作成功!')
                            this.$emit('update:visible', false)
                        } else {
                            this.$modal.msgError(res.msg)
                        }
                    })
                }
            })
        },
        handleClose(done) {
            this.$emit('update:visible', false)
        },

        materialRemoteMethod(val, cb) {
            listAllMaterialTypeV2({ materialType: val }).then((res) => {
                let materialOptions = []
                res.data.forEach((io) => {
                    materialOptions.push(io)
                })
                console.log(materialOptions, '=========materialOptions')
                cb(materialOptions)
            })
        },
        handleMaterialSelect(e) {
            // console.log('handleMaterialSelect::',e)
            this.dialogForm.groupingCode = e.groupingCode
            this.$forceUpdate()
            this.$refs.groupingCode.$emit('el.form.blur')
        },
        handleMaterialBlur(e) {
            const { materialOptions, dialogForm } = this
            // console.log('handleMaterialBlur::',!materialOptions.includes(dialogForm.materialType))
            // if(!materialOptions.includes(dialogForm.materialType)){
            //   this.dialogForm.materialType = ""
            // }
        },
    },
}
</script>

<style scoped>
</style>
